
<template>
  <AddTodo @addTodo="addTodo" />
  <TodoItem v-for="todo in filteredTodoList" :key="todo.id" :todo="todo">
    {{ todo.text }}
  </TodoItem>

  <FilterTodo @changeFilter="changefilter" />
</template>

<script setup>
import TodoItem from './TodoItem.vue'
import AddTodo from './AddTodo.vue'
import FilterTodo from './FilterTodo.vue'
import {reactive, computed, ref} from 'vue'
import { useTodoStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

const store = useTodoStore()

const { changefilter, addTodo, changestatus, deletetodo} = store
const { todoList, filteredTodoList} = storeToRefs(store)
console.log( filteredTodoList)

// const filter = ref('all')

// const changefilter = (type) => {
//   filter.value = type
// }
// const todoList = reactive([
//   { id: Math.random(), text: 'Learn Vue', completed: true },
//   { id: Math.random(), text: 'Learn React', completed: false },
//   { id: Math.random(), text: 'Learn Angular', completed: false },
// ])

// const addTodo = (todo) => {
//   todoList.push({
//     id: Math.random(),
//     text: todo,
//     completed: false
//   })
// console.log(todoList)

// }

// const changestatus = (todo) => {

// todoList.find((item) => {
//   if (item.id === todo.id) {
//     item.completed = !item.completed
//   }
// })
// console.log(todoList)
// }

// const deletetodo = (todo) => {
//   todoList.splice(todoList.indexOf(todo), 1)
//   console.log(todoList)
// }


// const filteredTodoList = computed(() => {
//   switch (filter.value) {
//     case 'all':
      
//       return todoList
//     case 'done':
      
//     return todoList.filter((todo) => todo.completed === true)
//     case 'not':
      
//     return todoList.filter((todo) => todo.completed === false)
//   }
//   console.log(filter,filteredTodoList)
// })
</script>